<template>
  <image-crop-upload v-model="show" :field="field" :url="url" :width="width" :height="height" :params="params"
    :headers="headers" :lang-type="language" :with-credentials="true" img-format="png" @src-file-set="srcFileSet"
    @crop-success="cropSuccess" @crop-upload-success="cropUploadSuccess" @crop-upload-fail="cropUploadFail" />
</template>

<script lang="ts">
import ImageCropUpload from 'vue-image-crop-upload'
import { Component, Prop, Vue } from 'vue-property-decorator'
import { AppModule } from '@/store/modules/app'

@Component({
  name: 'AvatarUpload',
  components: {
    ImageCropUpload
  }
})
export default class extends Vue {
  // You can add more Prop, see: https://github.com/dai-siki/vue-image-crop-upload#usage
  @Prop({ required: true })value!: boolean
  @Prop({ required: true })url!: string
  @Prop({ required: true })field!: string
  @Prop({ default: 300 })width!: number
  @Prop({ default: 300 })height!: number
  @Prop({ default: () => null })params!: object
  @Prop({ default: () => null })headers!: object

  // https://github.com/dai-siki/vue-image-crop-upload#language-package
 languageTypeList: { [key: string]: string } = {
    en: 'en',
    zh: 'zh',
    es: 'es-MX',
    ja: 'ja',
    ko: 'ko',
    it: 'it'
  }

  get show() {
    return this.value
  }

  set show(value) {
    this.$emit('input', value)
  }

  get language() {
    return this.languageTypeList[AppModule.language]
  }

 srcFileSet(fileName: string, fileType: string, fileSize: number) {
    this.$emit('src-file-set', fileName, fileType, fileSize)
  }

 cropSuccess(imgDataUrl: string, field: string) {
    this.$emit('crop-success', imgDataUrl, field)
  }

 cropUploadSuccess(jsonData: any, field: string) {
    this.$emit('crop-upload-success', jsonData, field)
  }

 cropUploadFail(status: boolean, field: string) {
    this.$emit('crop-upload-fail', status, field)
  }
}
</script>
